“Spot the Differences” Documentation by “demonisblack” v1.3

“Spot the Differences”

Created: 11/10/2018
By: demonisblack
Email: demonisblack@gmail.com

Thank you for purchasing my game. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. Introduction
  2. Getting Started
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. Game Functions
  7. Puzzles settings
  8. Build-in Edit Tools
  9. Game Assets
  10. Compatibility
  11. Sources and Credits
  12. Changelog
  13. Support Policy

A) Introduction - top

Spot the Differences is a HTML5 game where two versions of the same picture are shown side by side and you must find the differences between the two pictures.

The ZIP package contains the game with 1280×768 resolution that scales to fit the whole screen device, but it may not be perfectly full screen.

B) Getting Started - top

To install the game just upload folder 'game' to your server. The game won't run locally with some browser like Chrome due to some security mode.

You need a website that runs PHP to make facebook share button work, and make sure to change Facebook Open Graph meta and Twitter meta in index.html, just replace [GAME_URL] to your game URL.

        <!-- for Facebook -->
        <meta property="og:image" content="[GAME_URL]/share.jpg" />
        <meta property="og:url" content="[GAME_URL]" />
        
        <!-- for Twitter -->
        <meta name="twitter:image" content="[GAME_URL]/share.jpg" />

You can easily customize game text and settings in game.js file 

        var selectPuzzleCon = true; //enable select puzzles page

        var circleHighlight = {color:'#fff', stroke:5}; //game circle highlight settings
        var statusPuzzleComplete = 'COMPLETE'; //game status when complete
        var statusPuzzleTimer = 'TIME\'S UP'; //game status when time's up
        
        var resultTitle = 'GAME RESULT!'; //game result title
        var resultDesc = 'BEST SCORE'; //game result description
        
        var exitMessage = 'ARE YOUR SURE YOU\nWANT TO QUIT THE GAME?'; //go to main page message
        
        
        //Social share, [SCORE] will replace with game score
        var shareEnable = true; //toggle share
        var shareText = 'SHARE THIS GAME'; //social share message
        var shareTitle = 'My final score on Spot the Differences Game is [NUMBER].';//social share score title
		var shareMessage = '[NUMBER] is mine new score on Spot the Differences Game! Try it now!'; //social share score message

If you wish to add/edit puzzles, check out Puzzles Settings section.

If you wish to add/edit puzzles with tools, check out Build-in Edit Tools section.

The sound can be easily disabled to avoid compatibility issues in sound.js file: 

        var enableMobileSound = true;

The mobile rotate instruction can be easily change in mobile.js file: 

        var rotateInstruction = true; //enable rotate instruction for mobile
        var forPortrait=false; //for portrait only, set false for landscape mode

C) HTML Structure - top

The page start with the loader wrapper that covering the whole screen in the body. It shows loader progress when calls the function initPreload()

        <!-- PERCENT LOADER START-->
    	<div id="mainLoader"><img src="assets/loader.png" /><br><span>0</span></div>
        <!-- PERCENT LOADER END-->

This section is for browser not support page when calls the function checkBrowser(). It shows error message when detect the browser does not support canvas.

        <!-- BROWSER NOT SUPPORT START-->
        <div id="notSupportHolder">
            <div class="notSupport">YOUR BROWSER ISN'T SUPPORTED.<br/>PLEASE UPDATE YOUR BROWSER IN ORDER TO RUN THE GAME</div>
        </div>
        <!-- BROWSER NOT SUPPORT END-->

Device rotate instruction page when calls the function checkMobileOrientation(). It shows rotate instruction when device is in portrait view.

        <!-- ROTATE INSTRUCTION START-->
        <div id="rotateHolder">
            <div class="mobileRotate">
                    <div class="rotateDesc">ROTATE YOUR DEVICE <br/>TO LANDSCAPE</div>
            </div>
        </div>
        <!-- ROTATE INSTRUCTION END-->

Follow by one canvas tag in the body. The game start initiatie by calls the main function of the game initMain().

        <!-- CANVAS START-->
        <div id="canvasHolder">
            <canvas id="gameCanvas" width="1280" height="768"></canvas>
        </div>
        <!-- CANVAS END-->

D) CSS Files and Structure - top

I'm using two CSS files in this game. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page.

E) JavaScript - top

This game using Javascript files below.

  1. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

  2. Detect Mobile Browser is a open source scripts to detect mobile browsers and phones.

  3. CreateJs plugin is a suite of modular libraries and tools which work together to create interactive content on open web technologies via HTML5.

  4. TweenMax is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP).

  5. The game have the following js files
    • init.js : check if browser or device support

    • loader.js : loader to load all game images

    • main.js : initiate game setup and browser resize function

    • mobile.js : mobile orientation change

    • canvas.js : canvas setup and resize

    • sound.js : sound event

    • puzzles.js : puzzles settings

    • game.js : game play and logics

    • plugins.js : additonal useful plugins

Complete game flow:

  1. The index.html file start init.js for browser detection
  2. If browser is supported, init loader.js to start load asserts with loading progress
  3. For mobile the rotate instruction shows when device is in portrait view, detect by mobile.js
  4. When all asserts contained in "/assets" folder are loaded, the game start construct canvas.js and main.js from game.js thats shows game menu
  5. If user click start button in game menu, the game will start game with puzzle selection with game.js
  6. If user click on puzzle, the game will begin
  7. If user click on the correct hidden spot, user will score
  8. If user found all the hidden spots, the game will complete
  9. If game time is up, the game will fail
  10. If user click continue button at game result, it will go to menu page

F) Game Functions - top

The most important functions used for page.

The most important functions used for game.

G) Puzzles Settings - top

You can easily customize puzzles_arr in puzzles.js file

puzzles_arr array store all the puzzles, below is the explanation of each most important puzzles_arr array item:

        var puzzles_arr = [{
		thumbnail:'assets/puzzles/puzzle2_thumb.png',
		image:'assets/puzzles/puzzle2.png',
		timer:30000,
		hidden:[{x:897, y:622, ratio:50}],
	}];
  1. thumbnail - thumbnail path
  2. image - image path
  3. timer - game timer (0 to disable timer)
  4. hidden - hidden spot array list
    • x - position x
    • y - position y
    • ratio - ratio

H) Build-in Edit Tools - top

This is the section where you can edit the puzzle with the tool by running edit.html. The page start with edit tools, click generate button to export the array when you complete editing, replace the new array in 'puzzles_arr' in puzzles.js.

1) Basic Options
  1. Select the puzzle you want to edit, additionally you can add or remove puzzle, or swap the sequences.
  2. Edit your puzzle details (Thumbnail, Image, Timer, Hidden spot)
  3. Generate the new updated array, copy and replace into puzzles.js 'puzzles_arr' array list

2) Edit Puzzle Details
  1. Edit puzzle image, thumbnail and timer, click 'Update' to save and preview.

3) Edit hidden spot
  1. Select the hidden area you want to edit, additionally you can add or remove hidden spot, plus swap the sequences
  2. Drag and move around the circle on stage, or edit your hidden spot details (Position X, Position Y, Ratio), click 'Update' to save and preview.

I) Game Assets - top

The game contain 'design' folder which include following:

  1. spotthedifferences_1024x768.psd - with layer folders below
    • Option
    • Result
    • Game
    • Landing
    • Background

The folder 'assets' in 'game' folder contains all the images of the game that can be replaced. Is better to have the same size of the old ones if you want to reskin the game graphic without coding.

J) Compatibility - top

This game is build for Desktop browsers that support HTML5 canvas. Any mobile/tablet should work in landscape view, but they are not officially supported.

K) Sources and Credits - top

I've used the following font and sound files as listed.

L) Changelog - top

Version 1.3 Version 1.2 Version 1.1

K) Support Policy - top

Check out support policy here.

Once again, thank you so much for purchasing this game, if you have a more general question relating to the games on CodeCanyon, you might consider visiting the item page in the "Support" section.

If you like the game, please take a moment to rate it. Thanks!

How to rate an item on CodeCanyon?

If you want to rate one of our items on CodeCanyon please do it like this:
  1. Login to CodeCanyon
  2. Open the menu on the top right, and click onto the link “Downloads” which shows a list of your downloads
  3. Rate our items using the stars
  4. That’s it. Thank you very much!

demonisblack

Go To Table of Contents